<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3521793b660147d7e090bb8298f232eb"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
				display: flex;
				background: linear-gradient(to bottom,#3fccf0,#DBB1FB);
				padding: 20px;
				justify-content: center;
			}
			.map{
				width: 100%;
				height: calc(100vh);
			}
			.back{
				position: fixed;
				z-index: 99999;
				top: 35px;
				left: 5px;
			}
			
		</style>
	</head>
	<body>
		<div id="body">
			<mu-paper style="position: fixed;top: 35px;right: 5px;z-index: 9999;width: 100px;">
				<div style="display: flex;align-items: center;margin-top: 5px;" >
					<hr style="height:4px;border:none;border-top:2px solid #28F;width: 100%;" />
					<label style="font-size: 12px;">预设路线</label>
				</div>
				<div style="display: flex;align-items: center;margin-top: 5px;" >
					<hr style="height:4px;border:none;border-top:2px solid #AF5;width: 100%;" />
					<label style="font-size: 12px;">巡检路线</label>
				</div>
			</mu-paper>
			<div class="back">
				<mu-button fab small color="#e0e0e0" @click="back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
			</div>
			<div id="map" class="map"></div>
		</div>
	</body>
	<script type="text/javascript">
		var map;
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					map: {},
					task: {},
					patrolPathPolyline:null
				}
			},
			mounted() {},
			methods: {
				back() {
					mui.back()
				},
				getPipelineServiceByPatrol() {
					util.ajax("/pipeline/getPipelineServiceByPatrol", null, data => {
						this.getPointsOnPipelineByPipelineList(data.object);
					})
				},
				getPointsOnPipelineByPipelineList(pipelines) { // 获取在管道线上的标注点
					pipelines.forEach(pipeline => {
						var params = {
							'pipelineId': pipeline.id
						}
						util.ajax('/point/getPointsOnPipelineByPipelineId', params, data => {
							this.drawPieline(pipeline, data.object)
							this.drawPoint(data.object)
						})
					})
				},
				drawPieline(pipeline, pointList) {
					var path = []
					pointList.forEach(item => {
						path.push([item.lng, item.lat])
					})
					var polyline = new AMap.Polyline({
						path: path,
						isOutline: true,
						outlineColor: pipeline.color,
						borderWeight: 1,
						strokeColor: pipeline.color,
						strokeOpacity: 1,
						strokeWeight: 1,
						// 折线样式还支持 'dashed'
						strokeStyle: 'solit',
						// strokeStyle是dashed时有效
						// strokeDasharray: [10, 5],
						lineJoin: 'round',
						lineCap: 'round',
						zIndex: 50
					})
					polyline.setMap(this.map)
					this.map.setFitView([polyline])
				},
				drawPoint(pointList) {
					var path = []
					pointList.forEach(item => {
						var marker = new AMap.Marker({
							position: new AMap.LngLat(item.lng, item.lat),
							offset: new AMap.Pixel(-10, -10),
							icon: item.pointType.icon // 添加 Icon 图标 URL
						})
						this.map.add(marker)
					})
				},
				drawTaskPath(patrolLinePoints) { // 巡逻任务轨迹回放
					var pointList = patrolLinePoints.split('#')
					var path = []
					pointList.forEach(item => {
						path.push([item.split(',')[0], item.split(',')[1]])
					})
					var polyline = new AMap.Polyline({
						path: path,
						isOutline: true,
						outlineColor: '#28F',
						borderWeight: 2,
						strokeColor: '#28F',
						strokeOpacity: 1,
						strokeWeight: 2,
						// 折线样式还支持 'dashed'
						strokeStyle: 'solit',
						// strokeStyle是dashed时有效
						// strokeDasharray: [10, 5],
						lineJoin: 'round',
						lineCap: 'round',
						zIndex: 51
					})
					polyline.setMap(this.map)
				},
				getPatrolPath() {
					var params = {
						taskId: this.task.id,
					}
					util.ajax("/task/getPatrolPath", params, data => {
						var paths = [];
						data.object.forEach(item=>{
							paths.push([item.lng,item.lat])
						});
						this.patrolPathPolyline.setPath(paths)
						this.patrolPathPolyline.setMap(this.map)
					})
				}
			}
		})
		document.addEventListener('plusready', function() {
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			vm.map = new AMap.Map('map', {});
			vm.task = util.getData('task');
			vm.drawTaskPath(vm.task.patrolLinePoints);
			map = vm.map;
			vm.patrolPathPolyline = new AMap.Polyline({
				path: [],
				isOutline: true,
				outlineColor: '#AF5',
				borderWeight: 3,
				strokeColor: '#AF5',
				strokeOpacity: 1,
				strokeWeight: 2,
				// 折线样式还支持 'dashed'
				strokeStyle: 'solit',
				// strokeStyle是dashed时有效
				// strokeDasharray: [10, 5],
				lineJoin: 'round',
				lineCap: 'round',
				zIndex: 52
			})
			vm.getPatrolPath();
			vm.getPipelineServiceByPatrol();
		});
	</script>
</html>
